﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="divport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>WorldDBs</title>
	<link href="favicon.ico" rel="shortcut icon">
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/scanboard.css" />
	<link rel="stylesheet" type="text/css" href="css/animsition.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery.shCircleLoader.css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.shCircleLoader-min.js"></script>
	<style>
		.flex-center{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.flex-l{
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		.flex-r{
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.flex-lr{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.flex-bottom{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
		}
		.flex-bottom-l{
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;
		}
		.flex-top{
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
		.flex-top-l{
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
		}
		.clearfix {
			width: 100%;
		}
		.clearfix span {
			white-space:nowrap;
		}
		.lang-status {
			color: #FFFFFF;
			font-size: 12px;
			cursor: pointer;
			position: relative;
			padding-left: 30px;
		}
		.lang-status .lang-icon {
			width: 23px;
			height: 23px;
			margin-right: 2px;
		}
		.lang-status .xia-icon {
			width: 8px;
			height: 6px;
			margin-left: 3px;
		}

		.abs-content-wrap {
			width: 156px;
			background: #293449;
			box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.24);
			border-radius: 9px;
			box-sizing: border-box;
			position: absolute;
			top: 68px;
			left: 0px;
			display: none;
		}
		.abs-content-wrap .child-item {
			width: 154px;
			height: 49px;
			padding: 0 20px;
			box-sizing: border-box;
			color: #919FB2;
			font-size: 15px;
			cursor: pointer;
		}
		.abs-content-wrap .child-item .lang-icon {
			width: 22px;
			height: 22px;
			margin-right: 10px;
		}
		.abs-content-wrap .child-item:hover {
			color: #FFFFFF;
		}
		.abs-content-wrap-in {
			display: block;
			padding: 12px 0;
		}
	</style>
</head>
<body>
<div id="loader"></div>
<script type="text/javascript">
	$('#loader').shCircleLoader({color: "#00deff"});
</script>
<!--Top Start!-->
<div id="app" class="scanboardWp animsition">
	<div id="top">
		<div class="wp clearfix">
			<div class="left pageTit flex-l">
				<div class="lang-status flex-r" @click="langStatus = !langStatus">
					<img src="images/lang.png" class="lang-icon"/>
					<div v-text="langText"></div>
					<img src="images/xia1.png" class="xia-icon"/>
					<div class="abs-content-wrap" :class="langStatus ? 'abs-content-wrap-in' : ''" style="top: 45px;">
						<div class="child-item flex-l" v-for="(item, index) in langData" :key="item.name" @click="language_choose_event(index)">
							<img :src="item.img" mode="widthFix" class="lang-icon"/>
							<div v-text="item.name"></div>
						</div>
					</div>
				</div>
				<!--				<a class="summaryBtn" href="#">WorldDBs</a>-->
			</div>
			<div class="center topLogo">
				<a href="#"><img src="./images/logo.png"/></a>
			</div>
			<div class="right topBar">
				<div class="topTime change_luange_in">时间加载中...</div>
				<div class="clearfix">
					<!-- 						<a href="index.html" class="signOut fr">退出</a>
                                            <div class="company fr">
                                                <h3 style="">wd</h3>
                                                <div class="dropdown">

                                                </div>
                                            </div>
                     -->					</div>
			</div>
		</div>
	</div>
	<!--Top End!-->

	<!--Main Start!-->
	<div id="main" class="wp clearfix">
		<div class="left">
			<!--今日运单数量-->
			<div class="item waybill">
				<div class="itemTit">
					<span class="border-yellow change_luange_in">硬件总览</span>
				</div>
				<div class="itemCon itembg">
					<div class="progress" progress="80%">
						<h3 class="clearfix"><span class="change_luange_in">剩余</span><i class="change_luange_in">总硬盘</i></h3>
						<div class="progressBar">
							<span></span>
						</div>
						<h4>0%</h4>
					</div>
					<div class="progress" progress="15%">
						<h3 class="clearfix"><span class="change_luange_in">剩余</span><i class="change_luange_in">总内存</i></h3>
						<div class="progressBar">
							<span></span>
						</div>
						<h4>0%</h4>
					</div>
					<div class="progress" progress="5%">
						<h3 class="clearfix"><span class="change_luange_in">故障率</span><i></i></h3>
						<div class="progressBar">
							<span></span>
						</div>
						<h4>0%</h4>
					</div>
				</div>
			</div>

			<!--各阶段平均用时统计-->
			<div class="item">
				<div class="itemTit">
					<span class="border-green change_luange_in">收益总览</span>
				</div>
				<div class="itemCon">
					<ul class="listStyle">
						<li class="clearfix">
							<span class="change_luange_in">今日收益</span>
							<span><strong id="block_today">85821.7892</strong>wd</span>
						</li>
						<li class="clearfix">
							<span class="change_luange_in">本周收益</span>
							<span><strong id="block_week">168101.2054</strong>wd</span>
						</li>
						<li class="clearfix">
							<span class="change_luange_in">本月收益</span>
							<span><strong id="block_month">168101.2054</strong>wd</span>
						</li>
						<!-- <li class="clearfix">
							<span class="change_luange_in">今日产值</span>
							<span><strong id="block_today_per">7000</strong>wd</span>
						</li> -->
						<li class="clearfix">
							<span class="change_luange_in">日均产出</span>
							<span><strong id="block_today_out">56033.7351</strong>wd</span>
						</li>
					</ul>
				</div>
			</div>

			<!--人员信息-->
			<div class="item">
				<div class="itemTit">
					<span class="border-blue change_luange_in">全网概览</span>
				</div>
				<div class="itemCon itembg">
					<ul class="listStyle">
						<li class="clearfix">
							<span id="block_height"><span class="change_luange_in">区块高度:</span><strong>27962</strong></span>
							<span id="block_circle"><span class="change_luange_in">总流通量：</span><strong>331</strong></span>
							<span id="block_miner"><span class="change_luange_in" style="width: 60%">活跃矿工数：</span><strong>362</strong></span>
							<span id="block_reward"><span class="change_luange_in">24H产出：</span><strong>2131</strong></span>
							<span id="block_total_pleg"><span class="change_luange_in">总质押量：</span><strong>15</strong></span>
<!--							<span id="block_pleg"><span class="change_luange_in">质押量:</span><strong>20</strong></span>-->
							<span id="block_rate" style="width: 100%"><span style="width: auto" class="change_luange_in">全网算力:</span><strong>29</strong></span>
							<span id="block_destory" style="width: 100%"><span style="width: auto" class="change_luange_in">总账户数:</span><strong>10</strong></span>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="center">
			<div class="centerWp">
				<!--中间大地图-->
				<div class="mapContainer">
					<div class="btnLayer">
						<div class="search">
							<div class="searchInner">
								<a href="javascript:;" class="searchBtn"><span class="icoSearch"></span></a>
								<form class="searchForm">
									<button class="icoSearch"></button>
								</form>
							</div>
						</div>
					</div>
					<div id="myMap" class="item"></div>
				</div>

				<!--月运单量统计图-->
				<div class="billChart">
					<div class="itemTit">
						<span class="border-blue change_luange_in">24H基础手续费率走势</span>
					</div>
					<div id="myChart1"></div>
				</div>
			</div>
		</div>

		<div class="right">
			<!--总计运单数-->
			<div class="item total itembg">
				<div class="itemTit">
					<span class="border-yellow change_luange_in">全网有效算力</span>
				</div>
				<div class="itemCon">
					<div class="totalNum"><strong id="totalNum" total="368082">0</strong><span id="totalBz">GB</span></div>
				</div>
			</div>

			<!--基本信息-->
			<div class="item basicInfo">
				<div class="itemTit">
					<span class="border-green change_luange_in">全网算力</span>
				</div>
				<div class="itemCon itembg">
					<div class="infoPie">
						<ul class="clearfix">
							<li class="color-yellow">
								<span class="border-yellow" id="indicator1" total="50"></span>
								<p class="change_luange_in">矿工</p>
							</li>
							<li class="color-green">
								<span class="border-green" id="indicator2" total="30">0</span>
								<p class="change_luange_in">钱包</p>
							</li>
							<li class="color-blue">
								<span class="border-blue" id="indicator3" total="20">0</span>
								<p class="change_luange_in">区块高度</p>
							</li>
						</ul>
						<div id="indicatorContainer"></div>
					</div>
				</div>
			</div>

			<!--运单状态-->
			<div class="item billState">
				<div class="itemTit">
					<span class="border-green change_luange_in">挖矿排行榜</span>
				</div>
				<div class="itemCon">
					<div class="StateBox">
						<div class="StateTit">
							<span class="change_luange_in">矿工</span>
							<span class="change_luange_in">有效算力</span>
							<span class="change_luange_in">总奖励</span>
						</div>
						<div id="FontScroll">
							<ul>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="78%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="80%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="49%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="7%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="55%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="100%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="94%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="23%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="67%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="42%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="38%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
								<li>
									<div class="fontInner clearfix">
										<span>T100101</span>
										<span>1234G</span>
										<span>
												<div class="progress" progress="76%">
													<div class="progressBar">
														<span></span>
													</div>
													<h3><i><h4></h4></i></h3>
												</div>
											</span>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--Main End!-->
</div>

<div class="filterbg"></div>
<div class="popup">
	<a href="javascript:;" class="popupClose"></a>
	<div class="summary">
		<div class="summaryTop">
			<div id="summaryPie1" class="summaryPie"></div>
			<div id="summaryPie2" class="summaryPie"></div>
			<div id="summaryPie3" class="summaryPie"></div>
		</div>
		<div class="summaryBottom">
			<div class="summaryBar">
				<div class="summaryTit">
					<img src="images/tit1.png">
				</div>
				<div id="summaryBar"></div>
			</div>

			<div class="summaryLine">
				<div class="summaryTit">
					<img src="images/tit2.png">
				</div>
				<div id="summaryLine"></div>
			</div>
		</div>
	</div>
</div>
<canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
</body>
<script type="text/javascript" src="js/bg.js"></script>
<script type="text/javascript" src="js/scanboard.js"></script>
<script type="text/javascript" src="js/fontscroll.js"></script>
<script type="text/javascript" src="js/jquery.animsition.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=f8ffe058b8e6f5b05e8ff43ca4207393"></script>
<script src="language/language.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript">
	var language_obj = {};
	init_bui();
	$cl.change_all_language_event();

	function init_bui() {
		var _vue = new Vue({
			el: '#app',
			data: {
				langIx: 0, //0繁体中文 1英文
				on_disable:false,
				langData: [
					{
						name: '中文简体',
						img: 'images/cn.png',
						type : 'CH',
						lang: '简体中文',
					},
					{
						name: 'English',
						img: 'images/en.png',
						type : 'EN',
						lang : 'English',
					},
				],
				langStatus: false,
				languageStatus: false, //语言选择弹窗
				langText: 'EN',
			},
			mounted() {
				this.init();
			},
			methods: {
				init(){
					this.langText = window.localStorage.getItem('langType') || 'EN';
				},
				//切换语言
				language_choose_event(index){
					var _this = this;
					_this.langIx = index;
					_this.now_lang = _this.langData[index].lang;
					language_obj['language'] = _this.langData[index].type;
					window.localStorage.setItem('language_type','{"old_language":"' + language_obj['old_language'] + '","language":"CH"}');
					setTimeout(function() {
						language_obj['old_language'] = 'CH';
						var language_str = JSON.stringify(language_obj);
						window.localStorage.setItem('language_type',language_str);
						_this.is_choose_lang = !_this.is_choose_lang;
						window.localStorage.setItem('langName', _this.langData[index].lang);
						window.localStorage.setItem('langType', _this.langData[index].type);
						history.go(0);
					}, 1000);
				},
			},
		})
	}
</script>
</html>
